<?php if(!class_exists("View", false)) exit("no direct access allowed");?><!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题和介绍 -->
        <section class="mb-8 text-center">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-3">强大的AI工具集合</h2>
            <p class="text-neutral-500 max-w-2xl mx-auto">一站式体验各类AI能力，从对话交互到内容创作，满足您的多样化需求</p>
        </section>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <!-- 左侧工具选择栏 -->
            <div class="lg:col-span-3">
                <div class="bg-white rounded-xl shadow-card p-4 sticky top-24">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-bold">AI工具</h3>
                        <button id="add-new-tool" class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary/20 transition-colors">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                    
                    <div class="space-y-1 mb-6">
                        <button class="tool-btn w-full flex items-center space-x-3 px-3 py-3 rounded-lg border tool-active transition-all" data-tool="chat">
                            <div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                                <i class="fa fa-comments"></i>
                            </div>
                            <span>AI对话</span>
                        </button>
                        
                        <button class="tool-btn w-full flex items-center space-x-3 px-3 py-3 rounded-lg border border-transparent hover:border-primary/30 hover:bg-primary/5 transition-all" data-tool="image">
                            <div class="w-9 h-9 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
                                <i class="fa fa-image"></i>
                            </div>
                            <span>AI绘图</span>
                        </button>
                        
                        <button class="tool-btn w-full flex items-center space-x-3 px-3 py-3 rounded-lg border border-transparent hover:border-primary/30 hover:bg-primary/5 transition-all" data-tool="video">
                            <div class="w-9 h-9 rounded-lg bg-accent/10 flex items-center justify-center text-accent">
                                <i class="fa fa-video-camera"></i>
                            </div>
                            <span>AI视频生成</span>
                        </button>
                        
                        <button class="tool-btn w-full flex items-center space-x-3 px-3 py-3 rounded-lg border border-transparent hover:border-primary/30 hover:bg-primary/5 transition-all" data-tool="audio">
                            <div class="w-9 h-9 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                                <i class="fa fa-microphone"></i>
                            </div>
                            <span>AI语音合成</span>
                        </button>
                        
                        <button class="tool-btn w-full flex items-center space-x-3 px-3 py-3 rounded-lg border border-transparent hover:border-primary/30 hover:bg-primary/5 transition-all" data-tool="text">
                            <div class="w-9 h-9 rounded-lg bg-success/10 flex items-center justify-center text-success">
                                <i class="fa fa-file-text"></i>
                            </div>
                            <span>AI文字处理</span>
                        </button>
                    </div>
                    
                    <div class="border-t border-neutral-200 pt-4">
                        <h4 class="font-medium text-sm text-neutral-500 mb-3">使用统计</h4>
                        <div class="space-y-3">
                            <div>
                                <div class="flex items-center justify-between text-xs mb-1">
                                    <span>本月使用次数</span>
                                    <span class="font-medium">128</span>
                                </div>
                                <div class="w-full h-2 bg-neutral-200 rounded-full overflow-hidden">
                                    <div class="h-full bg-primary rounded-full" style="width: 75%"></div>
                                </div>
                            </div>
                            
                            <div>
                                <div class="flex items-center justify-between text-xs mb-1">
                                    <span>剩余使用次数</span>
                                    <span class="font-medium">372</span>
                                </div>
                                <div class="w-full h-2 bg-neutral-200 rounded-full overflow-hidden">
                                    <div class="h-full bg-success rounded-full" style="width: 62%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧工具内容区 -->
            <div class="lg:col-span-9">
                <!-- AI对话工具 -->
                <div class="tool-content" id="chat-content">
                    <div class="bg-white rounded-xl shadow-card overflow-hidden">
                        <!-- 工具头部 -->
                        <div class="border-b border-neutral-200 p-4 flex flex-wrap items-center justify-between gap-3">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary mr-3">
                                    <i class="fa fa-comments"></i>
                                </div>
                                <h3 class="font-bold">AI对话助手</h3>
                            </div>
                            
                            <div class="flex flex-wrap items-center gap-3">
                                <div class="relative">
                                    <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                        <option>GPT-4</option>
                                        <option>GPT-3.5</option>
                                        <option>Claude 2</option>
                                        <option>文心一言</option>
                                        <option>通义千问</option>
                                    </select>
                                    <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                </div>
                                
                                <div class="flex space-x-2">
                                    <button class="w-8 h-8 rounded-lg bg-neutral-100 flex items-center justify-center text-neutral-500 hover:bg-neutral-200 transition-colors">
                                        <i class="fa fa-history"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-lg bg-neutral-100 flex items-center justify-center text-neutral-500 hover:bg-neutral-200 transition-colors">
                                        <i class="fa fa-cog"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 对话内容区 -->
                        <div class="h-[500px] p-4 overflow-y-auto scrollbar-thin" id="chat-messages">
                            <!-- 系统提示 -->
                            <div class="bg-primary/5 rounded-lg p-3 mb-4 text-sm">
                                <div class="flex items-start">
                                    <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary mr-3 flex-shrink-0">
                                        <i class="fa fa-info"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium text-primary mb-1">AI助手</p>
                                        <p class="text-neutral-600">您好！我是您的AI对话助手，可以帮助您解答问题、提供建议或进行闲聊。请问有什么我可以帮助您的吗？</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 用户消息 -->
                            <div class="flex items-start justify-end mb-4">
                                <div class="max-w-[80%]">
                                    <div class="flex items-center justify-end mb-1">
                                        <span class="text-xs text-neutral-400">刚刚</span>
                                        <span class="text-xs font-medium text-neutral-500 ml-2">您</span>
                                    </div>
                                    <div class="bg-primary text-white rounded-lg p-3 text-sm">
                                        请介绍一下人工智能的发展历程
                                    </div>
                                </div>
                                <div class="w-8 h-8 rounded-full overflow-hidden ml-3 flex-shrink-0">
                                    <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-full h-full object-cover">
                                </div>
                            </div>
                            
                            <!-- AI回复 -->
                            <div class="flex items-start mb-4">
                                <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary mr-3 flex-shrink-0">
                                    <i class="fa fa-robot"></i>
                                </div>
                                <div class="max-w-[80%]">
                                    <div class="flex items-center mb-1">
                                        <span class="text-xs font-medium text-primary">GPT-4</span>
                                        <span class="text-xs text-neutral-400 ml-2">刚刚</span>
                                    </div>
                                    <div class="bg-neutral-100 rounded-lg p-3 text-sm">
                                        <p class="mb-2">人工智能的发展历程可以大致分为以下几个阶段：</p>
                                        <ol class="list-decimal pl-5 space-y-1 mb-2">
                                            <li>萌芽期（1950s-1960s）：图灵测试提出，达特茅斯会议确立"人工智能"概念</li>
                                            <li>发展与挫折期（1970s-1980s）：专家系统兴起，随后出现"AI寒冬"</li>
                                            <li>稳步发展期（1990s-2010s）：机器学习算法进步，实际应用开始出现</li>
                                            <li>爆发期（2010s至今）：深度学习取得突破，AlphaGo、GPT系列等里程碑成果出现</li>
                                        </ol>
                                        <p>近年来，大语言模型和多模态AI的快速发展推动人工智能进入了新的发展阶段。</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 正在输入提示 -->
                            <div class="flex items-start mb-4">
                                <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary mr-3 flex-shrink-0">
                                    <i class="fa fa-robot"></i>
                                </div>
                                <div class="max-w-[80%]">
                                    <div class="flex items-center mb-1">
                                        <span class="text-xs font-medium text-primary">GPT-4</span>
                                        <span class="text-xs text-neutral-400 ml-2">正在输入...</span>
                                    </div>
                                    <div class="bg-neutral-100 rounded-lg p-3 text-sm">
                                        <div class="flex space-x-1">
                                            <div class="w-2 h-2 bg-neutral-400 rounded-full animate-bounce" style="animation-delay: 0ms"></div>
                                            <div class="w-2 h-2 bg-neutral-400 rounded-full animate-bounce" style="animation-delay: 150ms"></div>
                                            <div class="w-2 h-2 bg-neutral-400 rounded-full animate-bounce" style="animation-delay: 300ms"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 输入区域 -->
                        <div class="border-t border-neutral-200 p-4">
                            <form id="chat-form" class="flex flex-col space-y-3">
                                <div class="relative">
                                    <textarea placeholder="请输入您的问题..." class="w-full bg-neutral-100 border border-neutral-200 rounded-lg p-4 pr-12 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary resize-none transition-all" rows="3"></textarea>
                                    <div class="absolute right-3 bottom-3 flex space-x-2">
                                        <button type="button" class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center text-neutral-500 hover:bg-neutral-50 transition-colors">
                                            <i class="fa fa-paperclip"></i>
                                        </button>
                                        <button type="button" class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center text-neutral-500 hover:bg-neutral-50 transition-colors">
                                            <i class="fa fa-microphone"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-3">
                                        <button type="button" class="text-sm text-neutral-500 hover:text-primary transition-colors">
                                            <i class="fa fa-history mr-1"></i> 历史记录
                                        </button>
                                        <button type="button" class="text-sm text-neutral-500 hover:text-primary transition-colors">
                                            <i class="fa fa-bookmark-o mr-1"></i> 保存
                                        </button>
                                    </div>
                                    
                                    <button type="submit" class="bg-primary hover:bg-primary/90 text-white font-medium px-6 py-2.5 rounded-lg transition-all shadow-sm hover:shadow">
                                        发送 <i class="fa fa-paper-plane ml-1"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- AI绘图工具 -->
                <div class="tool-content hidden" id="image-content">
                    <div class="bg-white rounded-xl shadow-card overflow-hidden">
                        <!-- 工具头部 -->
                        <div class="border-b border-neutral-200 p-4 flex flex-wrap items-center justify-between gap-3">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary mr-3">
                                    <i class="fa fa-image"></i>
                                </div>
                                <h3 class="font-bold">AI绘图工具</h3>
                            </div>
                            
                            <div class="flex flex-wrap items-center gap-3">
                                <div class="relative">
                                    <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                        <option>Midjourney</option>
                                        <option>DALL-E 3</option>
                                        <option>Stable Diffusion</option>
                                        <option>文心一格</option>
                                        <option>Stable Cascade</option>
                                    </select>
                                    <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                </div>
                                
                                <div class="flex space-x-2">
                                    <button class="w-8 h-8 rounded-lg bg-neutral-100 flex items-center justify-center text-neutral-500 hover:bg-neutral-200 transition-colors">
                                        <i class="fa fa-history"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-lg bg-neutral-100 flex items-center justify-center text-neutral-500 hover:bg-neutral-200 transition-colors">
                                        <i class="fa fa-cog"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 参数配置区 -->
                        <div class="border-b border-neutral-200 p-4 bg-neutral-50">
                            <h4 class="font-medium mb-3">生成参数</h4>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-xs text-neutral-500 mb-1">风格类型</label>
                                    <div class="relative">
                                        <select class="appearance-none w-full bg-white border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                            <option>写实风格</option>
                                            <option>动漫风格</option>
                                            <option>插画风格</option>
                                            <option>油画风格</option>
                                            <option>3D渲染</option>
                                        </select>
                                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-xs text-neutral-500 mb-1">图片尺寸</label>
                                    <div class="relative">
                                        <select class="appearance-none w-full bg-white border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                            <option>1024x1024</option>
                                            <option>1024x1536</option>
                                            <option>1536x1024</option>
                                            <option>800x800</option>
                                            <option>自定义</option>
                                        </select>
                                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-xs text-neutral-500 mb-1">生成质量</label>
                                    <div class="relative">
                                        <select class="appearance-none w-full bg-white border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                            <option>高 (4x)</option>
                                            <option>中 (2x)</option>
                                            <option>标准 (1x)</option>
                                        </select>
                                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 输入和结果区 -->
                        <div class="p-4">
                            <form id="image-form" class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium mb-2">描述词</label>
                                    <textarea placeholder="请输入图片描述，越详细生成效果越好..." class="w-full bg-neutral-100 border border-neutral-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary resize-none transition-all" rows="3"></textarea>
                                    <p class="text-xs text-neutral-400 mt-1">提示：可以描述主体、风格、光线、构图等要素</p>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium mb-2">负面描述词</label>
                                    <input type="text" placeholder="不想要的元素，用逗号分隔" class="w-full bg-neutral-100 border border-neutral-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                                </div>
                                
                                <div class="flex justify-end">
                                    <button type="submit" class="bg-secondary hover:bg-secondary/90 text-white font-medium px-6 py-2.5 rounded-lg transition-all shadow-sm hover:shadow">
                                        生成图片 <i class="fa fa-magic ml-1"></i>
                                    </button>
                                </div>
                            </form>
                            
                            <!-- 生成结果 -->
                            <div class="mt-6">
                                <h4 class="font-medium mb-3">生成结果</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                    <div class="rounded-lg overflow-hidden border border-neutral-200 group relative">
                                        <img src="https://picsum.photos/id/1015/500/500" alt="AI生成图片" class="w-full aspect-square object-cover">
                                        <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                                            <button class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-dark hover:bg-white transition-colors">
                                                <i class="fa fa-download"></i>
                                            </button>
                                            <button class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-dark hover:bg-white transition-colors">
                                                <i class="fa fa-refresh"></i>
                                            </button>
                                            <button class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-dark hover:bg-white transition-colors">
                                                <i class="fa fa-heart-o"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="rounded-lg overflow-hidden border border-neutral-200 group relative">
                                        <img src="https://picsum.photos/id/1018/500/500" alt="AI生成图片" class="w-full aspect-square object-cover">
                                        <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                                            <button class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-dark hover:bg-white transition-colors">
                                                <i class="fa fa-download"></i>
                                            </button>
                                            <button class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-dark hover:bg-white transition-colors">
                                                <i class="fa fa-refresh"></i>
                                            </button>
                                            <button class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-dark hover:bg-white transition-colors">
                                                <i class="fa fa-heart-o"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="rounded-lg overflow-hidden border border-neutral-200 group relative">
                                        <img src="https://picsum.photos/id/1019/500/500" alt="AI生成图片" class="w-full aspect-square object-cover">
                                        <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                                            <button class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-dark hover:bg-white transition-colors">
                                                <i class="fa fa-download"></i>
                                            </button>
                                            <button class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-dark hover:bg-white transition-colors">
                                                <i class="fa fa-refresh"></i>
                                            </button>
                                            <button class="w-9 h-9 rounded-full bg-white/90 flex items-center justify-center text-dark hover:bg-white transition-colors">
                                                <i class="fa fa-heart-o"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="rounded-lg overflow-hidden border border-dashed border-neutral-300 flex items-center justify-center h-full aspect-square group hover:border-primary transition-colors cursor-pointer">
                                        <div class="text-center p-4">
                                            <div class="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-400 group-hover:bg-primary/10 group-hover:text-primary transition-colors mx-auto mb-2">
                                                <i class="fa fa-plus"></i>
                                            </div>
                                            <p class="text-sm text-neutral-500">生成更多</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- AI视频生成工具 -->
                <div class="tool-content hidden" id="video-content">
                    <div class="bg-white rounded-xl shadow-card overflow-hidden">
                        <!-- 工具头部 -->
                        <div class="border-b border-neutral-200 p-4 flex flex-wrap items-center justify-between gap-3">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center text-accent mr-3">
                                    <i class="fa fa-video-camera"></i>
                                </div>
                                <h3 class="font-bold">AI视频生成</h3>
                            </div>
                            
                            <div class="flex flex-wrap items-center gap-3">
                                <div class="relative">
                                    <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                        <option>Runway ML</option>
                                        <option>Pika Labs</option>
                                        <option>HeyGen</option>
                                        <option>Kaiber</option>
                                    </select>
                                    <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                </div>
                                
                                <div class="flex space-x-2">
                                    <button class="w-8 h-8 rounded-lg bg-neutral-100 flex items-center justify-center text-neutral-500 hover:bg-neutral-200 transition-colors">
                                        <i class="fa fa-history"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-lg bg-neutral-100 flex items-center justify-center text-neutral-500 hover:bg-neutral-200 transition-colors">
                                        <i class="fa fa-cog"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 参数配置区 -->
                        <div class="border-b border-neutral-200 p-4 bg-neutral-50">
                            <h4 class="font-medium mb-3">视频参数</h4>
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                                <div>
                                    <label class="block text-xs text-neutral-500 mb-1">视频时长</label>
                                    <div class="relative">
                                        <select class="appearance-none w-full bg-white border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                            <option>5秒</option>
                                            <option>10秒</option>
                                            <option>15秒</option>
                                            <option>30秒</option>
                                            <option>60秒</option>
                                        </select>
                                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-xs text-neutral-500 mb-1">分辨率</label>
                                    <div class="relative">
                                        <select class="appearance-none w-full bg-white border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                            <option>720p</option>
                                            <option>1080p</option>
                                            <option>4K</option>
                                        </select>
                                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-xs text-neutral-500 mb-1">风格</label>
                                    <div class="relative">
                                        <select class="appearance-none w-full bg-white border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                            <option>真实感</option>
                                            <option>动画</option>
                                            <option>卡通</option>
                                            <option>抽象</option>
                                            <option>3D</option>
                                        </select>
                                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-xs text-neutral-500 mb-1">帧率</label>
                                    <div class="relative">
                                        <select class="appearance-none w-full bg-white border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                            <option>24 FPS</option>
                                            <option>30 FPS</option>
                                            <option>60 FPS</option>
                                        </select>
                                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 输入和结果区 -->
                        <div class="p-4">
                            <form id="video-form" class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium mb-2">视频描述</label>
                                    <textarea placeholder="详细描述视频内容、场景、角色动作、风格等..." class="w-full bg-neutral-100 border border-neutral-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary resize-none transition-all" rows="3"></textarea>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium mb-2">初始图像（可选）</label>
                                    <div class="border-2 border-dashed border-neutral-300 rounded-lg p-6 text-center hover:border-primary transition-colors cursor-pointer">
                                        <i class="fa fa-cloud-upload text-2xl text-neutral-400 mb-2"></i>
                                        <p class="text-sm text-neutral-500">点击上传图片或拖放至此处</p>
                                        <p class="text-xs text-neutral-400 mt-1">支持JPG、PNG格式，建议分辨率1024x768</p>
                                    </div>
                                </div>
                                
                                <div class="flex justify-end">
                                    <button type="submit" class="bg-accent hover:bg-accent/90 text-white font-medium px-6 py-2.5 rounded-lg transition-all shadow-sm hover:shadow">
                                        生成视频 <i class="fa fa-play-circle ml-1"></i>
                                    </button>
                                </div>
                            </form>
                            
                            <!-- 生成结果 -->
                            <div class="mt-6">
                                <h4 class="font-medium mb-3">生成历史</h4>
                                <div class="space-y-4">
                                    <div class="rounded-lg overflow-hidden border border-neutral-200">
                                        <div class="relative">
                                            <video class="w-full aspect-video object-cover" controls poster="https://picsum.photos/id/1039/1200/600">
                                                <source src="#" type="video/mp4">
                                                您的浏览器不支持视频播放
                                            </video>
                                            <div class="absolute top-3 right-3 flex space-x-2">
                                                <button class="w-8 h-8 rounded-full bg-black/50 flex items-center justify-center text-white hover:bg-black/70 transition-colors">
                                                    <i class="fa fa-download"></i>
                                                </button>
                                                <button class="w-8 h-8 rounded-full bg-black/50 flex items-center justify-center text-white hover:bg-black/70 transition-colors">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="p-3 border-t border-neutral-200">
                                            <h5 class="font-medium text-sm mb-1">自然风光延时摄影</h5>
                                            <p class="text-xs text-neutral-500 line-clamp-1">日出时分的山脉和云海，阳光逐渐照亮山峰，云雾流动，4K分辨率，真实感风格</p>
                                            <div class="flex items-center justify-between mt-2">
                                                <span class="text-xs text-neutral-400">5秒 · 1080p · 2小时前</span>
                                                <button class="text-xs text-primary hover:underline">重新生成</button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="rounded-lg overflow-hidden border border-neutral-200">
                                        <div class="relative">
                                            <video class="w-full aspect-video object-cover" controls poster="https://picsum.photos/id/1047/1200/600">
                                                <source src="#" type="video/mp4">
                                                您的浏览器不支持视频播放
                                            </video>
                                            <div class="absolute top-3 right-3 flex space-x-2">
                                                <button class="w-8 h-8 rounded-full bg-black/50 flex items-center justify-center text-white hover:bg-black/70 transition-colors">
                                                    <i class="fa fa-download"></i>
                                                </button>
                                                <button class="w-8 h-8 rounded-full bg-black/50 flex items-center justify-center text-white hover:bg-black/70 transition-colors">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="p-3 border-t border-neutral-200">
                                            <h5 class="font-medium text-sm mb-1">卡通风格城市动画</h5>
                                            <p class="text-xs text-neutral-500 line-clamp-1">卡通风格的城市街景，车辆和行人移动，日落时分，温暖的色调</p>
                                            <div class="flex items-center justify-between mt-2">
                                                <span class="text-xs text-neutral-400">10秒 · 720p · 昨天</span>
                                                <button class="text-xs text-primary hover:underline">重新生成</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 其他工具内容区结构类似，默认隐藏 -->
                <div class="tool-content hidden" id="audio-content">
                    <!-- AI语音合成工具内容 -->
                    <div class="bg-white rounded-xl shadow-card overflow-hidden p-6 text-center">
                        <div class="w-16 h-16 rounded-full bg-warning/10 flex items-center justify-center text-warning mx-auto mb-4">
                            <i class="fa fa-microphone text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2">AI语音合成工具</h3>
                        <p class="text-neutral-500 mb-6">将文本转换为自然流畅的语音，支持多种音色和语言</p>
                        <button class="bg-warning hover:bg-warning/90 text-white font-medium px-6 py-2.5 rounded-lg transition-all shadow-sm hover:shadow">
                            开始使用 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                
                <div class="tool-content hidden" id="text-content">
                    <!-- AI文字处理工具内容 -->
                    <div class="bg-white rounded-xl shadow-card overflow-hidden p-6 text-center">
                        <div class="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center text-success mx-auto mb-4">
                            <i class="fa fa-file-text text-2xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2">AI文字处理工具</h3>
                        <p class="text-neutral-500 mb-6">智能处理文本内容，包括摘要、翻译、校对和创作</p>
                        <button class="bg-success hover:bg-success/90 text-white font-medium px-6 py-2.5 rounded-lg transition-all shadow-sm hover:shadow">
                            开始使用 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 添加新工具弹窗 -->
    <div id="add-tool-modal" class="fixed inset-0 z-50 hidden items-center justify-center">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        <div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-md mx-4 relative z-10 transform transition-all scale-95 opacity-0" id="modal-content">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-bold text-lg">添加新AI工具</h3>
                <button id="close-modal" class="text-neutral-400 hover:text-neutral-600 transition-colors">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <form id="add-tool-form" class="space-y-4">
                <div>
                    <label for="tool-name" class="block text-sm font-medium text-neutral-700 mb-1">工具名称</label>
                    <input type="text" id="tool-name" class="w-full bg-neutral-100 border border-neutral-200 rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="例如：AI代码助手">
                </div>
                
                <div>
                    <label for="tool-type" class="block text-sm font-medium text-neutral-700 mb-1">工具类型</label>
                    <div class="relative">
                        <select id="tool-type" class="appearance-none w-full bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2.5 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="">请选择工具类型</option>
                            <option value="code">代码相关</option>
                            <option value="design">设计相关</option>
                            <option value="writing">写作相关</option>
                            <option value="analysis">数据分析</option>
                            <option value="other">其他类型</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                    </div>
                </div>
                
                <div>
                    <label for="tool-icon" class="block text-sm font-medium text-neutral-700 mb-1">选择图标</label>
                    <div class="grid grid-cols-6 gap-3 max-h-40 overflow-y-auto p-2 border border-neutral-200 rounded-lg scrollbar-thin">
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-primary/10" data-icon="fa-code">
                            <i class="fa fa-code text-xl mb-1"></i>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-primary/10" data-icon="fa-paint-brush">
                            <i class="fa fa-paint-brush text-xl mb-1"></i>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-primary/10" data-icon="fa-file-text">
                            <i class="fa fa-file-text text-xl mb-1"></i>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-primary/10" data-icon="fa-bar-chart">
                            <i class="fa fa-bar-chart text-xl mb-1"></i>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-primary/10" data-icon="fa-lightbulb-o">
                            <i class="fa fa-lightbulb-o text-xl mb-1"></i>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-primary/10" data-icon="fa-calculator">
                            <i class="fa fa-calculator text-xl mb-1"></i>
                        </div>
                    </div>
                    <input type="hidden" id="selected-icon" value="fa-code">
                </div>
                
                <div>
                    <label for="tool-color" class="block text-sm font-medium text-neutral-700 mb-1">工具颜色</label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="tool-color" class="w-10 h-10 p-0 border-0 rounded cursor-pointer" value="#165DFF">
                        <div class="flex flex-wrap gap-2 flex-grow">
                            <span class="w-6 h-6 rounded-full bg-primary cursor-pointer color-option" data-color="#165DFF"></span>
                            <span class="w-6 h-6 rounded-full bg-secondary cursor-pointer color-option" data-color="#4080FF"></span>
                            <span class="w-6 h-6 rounded-full bg-accent cursor-pointer color-option" data-color="#0FC6C2"></span>
                            <span class="w-6 h-6 rounded-full bg-success cursor-pointer color-option" data-color="#00B42A"></span>
                            <span class="w-6 h-6 rounded-full bg-warning cursor-pointer color-option" data-color="#FF7D00"></span>
                            <span class="w-6 h-6 rounded-full bg-danger cursor-pointer color-option" data-color="#F53F3F"></span>
                        </div>
                    </div>
                </div>
                
                <div class="pt-2">
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium px-4 py-2.5 rounded-lg transition-all shadow-sm hover:shadow">
                        添加工具
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-neutral-200 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <div class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center">
                        <i class="fa fa-robot text-white"></i>
                    </div>
                    <span class="font-bold">AI工具箱</span>
                </div>
                
                <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-neutral-500">
                    <a href="#" class="hover:text-primary transition-colors">关于我们</a>
                    <a href="#" class="hover:text-primary transition-colors">使用条款</a>
                    <a href="#" class="hover:text-primary transition-colors">隐私政策</a>
                    <a href="#" class="hover:text-primary transition-colors">帮助中心</a>
                    <a href="#" class="hover:text-primary transition-colors">联系我们</a>
                </div>
                
                <div class="mt-4 md:mt-0 text-sm text-neutral-400">
                    © 2023 AI工具箱. 保留所有权利.
                </div>
            </div>
        </div>
    </footer>

    <!-- 通知提示 -->
    <div id="notification" class="fixed top-20 right-5 z-50 hidden px-5 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full">
        <div class="flex items-center">
            <i id="notification-icon" class="mr-2 text-xl"></i>
            <span id="notification-message" class="text-sm"></span>
        </div>
    </div>

    <!-- 历史记录模态框 -->
    <div id="history-modal" class="fixed inset-0 z-50 hidden items-center justify-center">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        <div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-2xl mx-4 relative z-10 transform transition-all scale-95 opacity-0 max-h-[90vh] flex flex-col">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-bold text-lg">历史记录</h3>
                <button class="close-history-modal text-neutral-400 hover:text-neutral-600 transition-colors">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <div class="flex-grow overflow-y-auto scrollbar-thin">
                <div class="space-y-3" id="history-list">
                    <!-- 历史记录项示例 -->
                    <div class="p-3 border border-neutral-200 rounded-lg hover:border-primary/30 transition-colors cursor-pointer history-item" data-id="1">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="font-medium text-sm">人工智能发展历程查询</h4>
                                <p class="text-xs text-neutral-500 mt-1 line-clamp-1">请介绍一下人工智能的发展历程</p>
                            </div>
                            <span class="text-xs text-neutral-400">今天 14:35</span>
                        </div>
                    </div>
                    
                    <div class="p-3 border border-neutral-200 rounded-lg hover:border-primary/30 transition-colors cursor-pointer history-item" data-id="2">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="font-medium text-sm">自然风光图片生成</h4>
                                <p class="text-xs text-neutral-500 mt-1 line-clamp-1">高山湖泊，日出，写实风格，4K分辨率</p>
                            </div>
                            <span class="text-xs text-neutral-400">昨天 09:12</span>
                        </div>
                    </div>
                    
                    <div class="p-3 border border-neutral-200 rounded-lg hover:border-primary/30 transition-colors cursor-pointer history-item" data-id="3">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="font-medium text-sm">城市动画生成</h4>
                                <p class="text-xs text-neutral-500 mt-1 line-clamp-1">卡通风格的城市街景，车辆和行人移动</p>
                            </div>
                            <span class="text-xs text-neutral-400">2023-06-15</span>
                        </div>
                    </div>
                </div>
                
                <!-- 空状态 -->
                <div id="history-empty" class="hidden py-12 text-center">
                    <div class="w-16 h-16 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-400 mx-auto mb-4">
                        <i class="fa fa-history text-2xl"></i>
                    </div>
                    <p class="text-neutral-500">暂无历史记录</p>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-t border-neutral-200 flex justify-between">
                <button id="clear-history" class="text-sm text-danger hover:text-danger/80 transition-colors">
                    <i class="fa fa-trash mr-1"></i> 清空历史
                </button>
                <div>
                    <button class="close-history-modal text-sm bg-neutral-100 hover:bg-neutral-200 text-neutral-700 px-4 py-2 rounded-lg transition-colors mr-2">
                        取消
                    </button>
                    <button id="import-history" class="text-sm bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors">
                        导入记录
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div id="settings-modal" class="fixed inset-0 z-50 hidden items-center justify-center">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        <div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-md mx-4 relative z-10 transform transition-all scale-95 opacity-0 max-h-[90vh] flex flex-col">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-bold text-lg">设置</h3>
                <button class="close-settings-modal text-neutral-400 hover:text-neutral-600 transition-colors">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <div class="flex-grow overflow-y-auto scrollbar-thin">
                <div class="space-y-6">
                    <!-- 通用设置 -->
                    <div>
                        <h4 class="font-medium mb-3">通用设置</h4>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium">深色模式</p>
                                    <p class="text-xs text-neutral-500">切换深色/浅色显示模式</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" id="dark-mode-toggle" class="sr-only peer">
                                    <div class="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/30 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                </label>
                            </div>
                            
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium">通知提醒</p>
                                    <p class="text-xs text-neutral-500">操作完成时显示通知</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" id="notifications-toggle" class="sr-only peer" checked>
                                    <div class="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/30 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 隐私设置 -->
                    <div>
                        <h4 class="font-medium mb-3">隐私设置</h4>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium">自动保存历史</p>
                                    <p class="text-xs text-neutral-500">自动保存您的操作记录</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" id="save-history-toggle" class="sr-only peer" checked>
                                    <div class="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/30 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                </label>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium mb-1">历史记录保留时间</label>
                                <div class="relative">
                                    <select class="appearance-none w-full bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                        <option>7天</option>
                                        <option selected>30天</option>
                                        <option>90天</option>
                                        <option>永久</option>
                                    </select>
                                    <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 账户设置 -->
                    <div>
                        <h4 class="font-medium mb-3">账户设置</h4>
                        <div class="space-y-3">
                            <div>
                                <label class="block text-sm font-medium mb-1">账号绑定</label>
                                <div class="flex flex-wrap gap-2">
                                    <button class="flex items-center space-x-2 bg-neutral-100 hover:bg-neutral-200 px-3 py-1.5 rounded-lg text-sm transition-colors">
                                        <i class="fa fa-google text-danger"></i>
                                        <span>绑定Google</span>
                                    </button>
                                    <button class="flex items-center space-x-2 bg-neutral-100 hover:bg-neutral-200 px-3 py-1.5 rounded-lg text-sm transition-colors">
                                        <i class="fa fa-github text-dark"></i>
                                        <span>绑定GitHub</span>
                                    </button>
                                </div>
                            </div>
                            
                            <button class="w-full flex items-center justify-center space-x-2 bg-danger/10 hover:bg-danger/20 text-danger px-3 py-2 rounded-lg text-sm transition-colors">
                                <i class="fa fa-sign-out"></i>
                                <span>退出登录</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-t border-neutral-200 flex justify-end">
                <button class="close-settings-modal text-sm bg-neutral-100 hover:bg-neutral-200 text-neutral-700 px-4 py-2 rounded-lg transition-colors mr-2">
                    取消
                </button>
                <button id="save-settings" class="text-sm bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors">
                    保存设置
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 工具切换功能
            const toolBtns = document.querySelectorAll('.tool-btn');
            const toolContents = document.querySelectorAll('.tool-content');
            
            toolBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const tool = this.getAttribute('data-tool');
                    
                    // 更新按钮状态
                    toolBtns.forEach(b => {
                        b.classList.remove('tool-active');
                        b.classList.add('border-transparent', 'hover:border-primary/30', 'hover:bg-primary/5');
                    });
                    this.classList.add('tool-active');
                    this.classList.remove('border-transparent', 'hover:border-primary/30', 'hover:bg-primary/5');
                    
                    // 显示对应内容
                    toolContents.forEach(content => {
                        content.classList.add('hidden');
                    });
                    document.getElementById(`${tool}-content`).classList.remove('hidden');
                });
            });
            
            // 添加新工具弹窗
            const addToolBtn = document.getElementById('add-new-tool');
            const addToolModal = document.getElementById('add-tool-modal');
            const modalContent = document.getElementById('modal-content');
            const closeModalBtn = document.getElementById('close-modal');
            
            addToolBtn.addEventListener('click', function() {
                addToolModal.classList.remove('hidden');
                addToolModal.classList.add('flex');
                setTimeout(() => {
                    modalContent.classList.remove('scale-95', 'opacity-0');
                    modalContent.classList.add('scale-100', 'opacity-100');
                }, 10);
            });
            
            function closeModal() {
                modalContent.classList.remove('scale-100', 'opacity-100');
                modalContent.classList.add('scale-95', 'opacity-0');
                setTimeout(() => {
                    addToolModal.classList.add('hidden');
                    addToolModal.classList.remove('flex');
                }, 200);
            }
            
            closeModalBtn.addEventListener('click', closeModal);
            
            // 点击模态框外部关闭
            addToolModal.addEventListener('click', function(e) {
                if (e.target === addToolModal) {
                    closeModal();
                }
            });
            
            // 图标选择
            const iconOptions = document.querySelectorAll('.icon-option');
            const selectedIconInput = document.getElementById('selected-icon');
            
            iconOptions.forEach(option => {
                option.addEventListener('click', function() {
                    iconOptions.forEach(opt => opt.classList.remove('bg-primary/10', 'border', 'border-primary'));
                    this.classList.add('bg-primary/10', 'border', 'border-primary');
                    selectedIconInput.value = this.getAttribute('data-icon');
                });
            });
            
            // 颜色选择
            const colorOptions = document.querySelectorAll('.color-option');
            const colorInput = document.getElementById('tool-color');
            
            colorOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const color = this.getAttribute('data-color');
                    colorInput.value = color;
                });
            });
            
            // 添加新工具表单提交
            const addToolForm = document.getElementById('add-tool-form');
            
            addToolForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const toolName = document.getElementById('tool-name').value;
                const toolType = document.getElementById('tool-type').value;
                const toolIcon = document.getElementById('selected-icon').value;
                const toolColor = document.getElementById('tool-color').value;
                
                if (!toolName || !toolType) {
                    showNotification('请填写工具名称和类型', 'error');
                    return;
                }
                
                // 创建新工具按钮
                const toolsContainer = document.querySelector('.space-y-1');
                const newToolBtn = document.createElement('button');
                newToolBtn.className = 'tool-btn w-full flex items-center space-x-3 px-3 py-3 rounded-lg border border-transparent hover:border-primary/30 hover:bg-primary/5 transition-all';
                newToolBtn.setAttribute('data-tool', 'custom-' + Date.now());
                newToolBtn.innerHTML = `
                    <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background-color: ${hexToRgba(toolColor, 0.1)}; color: ${toolColor}">
                        <i class="fa ${toolIcon}"></i>
                    </div>
                    <span>${toolName}</span>
                `;
                
                // 添加到工具列表
                toolsContainer.appendChild(newToolBtn);
                
                // 为新工具添加点击事件
                newToolBtn.addEventListener('click', function() {
                    const tool = this.getAttribute('data-tool');
                    
                    // 更新按钮状态
                    toolBtns.forEach(b => {
                        b.classList.remove('tool-active');
                        b.classList.add('border-transparent', 'hover:border-primary/30', 'hover:bg-primary/5');
                    });
                    this.classList.add('tool-active');
                    this.classList.remove('border-transparent', 'hover:border-primary/30', 'hover:bg-primary/5');
                    
                    // 隐藏所有内容
                    toolContents.forEach(content => {
                        content.classList.add('hidden');
                    });
                    
                    // 显示成功添加提示
                    showNotification(`已添加新工具: ${toolName}`, 'success');
                });
                
                // 关闭模态框并重置表单
                closeModal();
                addToolForm.reset();
                iconOptions.forEach(opt => opt.classList.remove('bg-primary/10', 'border', 'border-primary'));
                iconOptions[0].classList.add('bg-primary/10', 'border', 'border-primary');
                selectedIconInput.value = 'fa-code';
                
                // 显示成功通知
                showNotification(`工具 "${toolName}" 添加成功`, 'success');
            });
            
            // 表单提交处理
            document.getElementById('chat-form').addEventListener('submit', function(e) {
                e.preventDefault();
                const input = this.querySelector('textarea');
                if (input.value.trim()) {
                    showNotification('消息已发送，等待AI回复...', 'info');
                    input.value = '';
                }
            });
            
            document.getElementById('image-form').addEventListener('submit', function(e) {
                e.preventDefault();
                const input = this.querySelector('textarea');
                if (input.value.trim()) {
                    showNotification('正在生成图片，请稍候...', 'info');
                } else {
                    showNotification('请输入图片描述词', 'error');
                }
            });
            
            document.getElementById('video-form').addEventListener('submit', function(e) {
                e.preventDefault();
                const input = this.querySelector('textarea');
                if (input.value.trim()) {
                    showNotification('视频生成中，这可能需要几分钟时间...', 'info');
                } else {
                    showNotification('请输入视频描述', 'error');
                }
            });
            
            // 导航栏滚动效果
            window.addEventListener('scroll', function() {
                const header = document.querySelector('header');
                if (window.scrollY > 10) {
                    header.classList.add('shadow');
                } else {
                    header.classList.remove('shadow');
                }
            });
            
            // 显示通知
            function showNotification(message, type = 'info') {
                const notificationEl = document.getElementById('notification');
                const iconEl = document.getElementById('notification-icon');
                const messageEl = document.getElementById('notification-message');
                
                // 设置通知类型样式
                notificationEl.className = 'fixed top-20 right-5 z-50 px-5 py-3 rounded-lg shadow-lg transform transition-all duration-300';
                iconEl.className = 'mr-2 text-xl';
                
                if (type === 'success') {
                    notificationEl.classList.add('bg-success/10', 'border', 'border-success/30', 'text-success');
                    iconEl.classList.add('fa', 'fa-check-circle');
                } else if (type === 'error') {
                    notificationEl.classList.add('bg-danger/10', 'border', 'border-danger/30', 'text-danger');
                    iconEl.classList.add('fa', 'fa-exclamation-circle');
                } else {
                    notificationEl.classList.add('bg-primary/10', 'border', 'border-primary/30', 'text-primary');
                    iconEl.classList.add('fa', 'fa-info-circle');
                }
                
                messageEl.textContent = message;
                
                // 显示通知
                notificationEl.classList.remove('translate-x-full');
                notificationEl.classList.add('translate-x-0');
                
                // 3秒后隐藏
                setTimeout(() => {
                    notificationEl.classList.remove('translate-x-0');
                    notificationEl.classList.add('translate-x-full');
                }, 3000);
            }
            
            // 辅助函数：将十六进制颜色转换为带透明度的RGBA
            function hexToRgba(hex, alpha) {
                const r = parseInt(hex.slice(1, 3), 16);
                const g = parseInt(hex.slice(3, 5), 16);
                const b = parseInt(hex.slice(5, 7), 16);
                return `rgba(${r}, ${g}, ${b}, ${alpha})`;
            }

            // 历史记录按钮功能
            const historyButtons = document.querySelectorAll('.fa-history').forEach(icon => {
                const button = icon.closest('button');
                if (button) {
                    button.addEventListener('click', openHistoryModal);
                }
            });
            
            // 设置按钮功能
            const settingsButtons = document.querySelectorAll('.fa-cog').forEach(icon => {
                const button = icon.closest('button');
                if (button) {
                    button.addEventListener('click', openSettingsModal);
                }
            });
            
            // 打开历史记录模态框
            function openHistoryModal() {
                const historyModal = document.getElementById('history-modal');
                historyModal.classList.remove('hidden');
                historyModal.classList.add('flex');
                setTimeout(() => {
                    const modalContent = historyModal.querySelector('div[class*="max-w-2xl"]');
                    modalContent.classList.remove('scale-95', 'opacity-0');
                    modalContent.classList.add('scale-100', 'opacity-100');
                }, 10);
                
                // 检查历史记录是否为空
                checkHistoryEmpty();
            }
            
            // 关闭历史记录模态框
            function closeHistoryModal() {
                const historyModal = document.getElementById('history-modal');
                const modalContent = historyModal.querySelector('div[class*="max-w-2xl"]');
                modalContent.classList.remove('scale-100', 'opacity-100');
                modalContent.classList.add('scale-95', 'opacity-0');
                setTimeout(() => {
                    historyModal.classList.add('hidden');
                    historyModal.classList.remove('flex');
                }, 200);
            }
            
            // 打开设置模态框
            function openSettingsModal() {
                const settingsModal = document.getElementById('settings-modal');
                settingsModal.classList.remove('hidden');
                settingsModal.classList.add('flex');
                setTimeout(() => {
                    const modalContent = settingsModal.querySelector('div[class*="max-w-md"]');
                    modalContent.classList.remove('scale-95', 'opacity-0');
                    modalContent.classList.add('scale-100', 'opacity-100');
                }, 10);
            }
            
            // 关闭设置模态框
            function closeSettingsModal() {
                const settingsModal = document.getElementById('settings-modal');
                const modalContent = settingsModal.querySelector('div[class*="max-w-md"]');
                modalContent.classList.remove('scale-100', 'opacity-100');
                modalContent.classList.add('scale-95', 'opacity-0');
                setTimeout(() => {
                    settingsModal.classList.add('hidden');
                    settingsModal.classList.remove('flex');
                }, 200);
            }
            
            // 检查历史记录是否为空
            function checkHistoryEmpty() {
                const historyList = document.getElementById('history-list');
                const historyEmpty = document.getElementById('history-empty');
                
                if (historyList.children.length === 0) {
                    historyList.classList.add('hidden');
                    historyEmpty.classList.remove('hidden');
                } else {
                    historyList.classList.remove('hidden');
                    historyEmpty.classList.add('hidden');
                }
            }
            
            // 清空历史记录
            document.getElementById('clear-history').addEventListener('click', function() {
                if (confirm('确定要清空所有历史记录吗？此操作不可恢复。')) {
                    const historyList = document.getElementById('history-list');
                    while (historyList.firstChild) {
                        historyList.removeChild(historyList.firstChild);
                    }
                    checkHistoryEmpty();
                    showNotification('历史记录已清空', 'success');
                }
            });
            
            // 导入历史记录
            document.getElementById('import-history').addEventListener('click', function() {
                showNotification('历史记录导入功能即将上线', 'info');
            });
            
            // 保存设置
            document.getElementById('save-settings').addEventListener('click', function() {
                // 这里可以添加保存设置的逻辑
                closeSettingsModal();
                showNotification('设置已保存', 'success');
            });
            
            // 深色模式切换
            document.getElementById('dark-mode-toggle').addEventListener('change', function() {
                if (this.checked) {
                    document.documentElement.classList.add('dark');
                    // 这里可以添加深色模式的具体样式设置
                } else {
                    document.documentElement.classList.remove('dark');
                    // 这里可以移除深色模式的具体样式设置
                }
            });
            
            // 历史记录项点击事件
            document.querySelectorAll('.history-item').forEach(item => {
                item.addEventListener('click', function() {
                    const historyId = this.getAttribute('data-id');
                    // 这里可以添加加载历史记录的逻辑
                    showNotification(`正在加载历史记录 #${historyId}`, 'info');
                    closeHistoryModal();
                });
            });
            
            // 关闭按钮事件绑定
            document.querySelectorAll('.close-history-modal').forEach(button => {
                button.addEventListener('click', closeHistoryModal);
            });
            
            document.querySelectorAll('.close-settings-modal').forEach(button => {
                button.addEventListener('click', closeSettingsModal);
            });
            
            // 点击模态框外部关闭
            document.getElementById('history-modal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeHistoryModal();
                }
            });
            
            document.getElementById('settings-modal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeSettingsModal();
                }
            });
        });
    </script>